<template>
  <div class="board" style="width: 100%">
    <div class="home">
      <grid-layout
        :layout="layoutData"
        :col-num="12"
        :row-height="layoutHeight"
        :is-draggable="dialogVisible"
        :is-resizable="dialogVisible"
        :is-mirrored="false"
        :vertical-compact="true"
        :margin="[10, 10]"
        :use-css-transforms="true"
      >
        <grid-item v-for="(item,index) in layoutData"
                   :x="item.x"
                   :y="item.y"
                   :w="item.w"
                   :h="item.h"
                   :i="item.i"
                   :key="item.i"
        >
          <Chart :option="chartOption" style="height: 100%;width: 100%" />
        </grid-item>
      </grid-layout>

    </div>
  </div>
</template>
<script>

  import VueGridLayout from 'vue-grid-layout'
  import Chart from '../../components/Chart'

  const layoutData = {
    'mainData': [
      {
        'x': 0,
        'y': 0,
        'w': 1,
        'h': 1,
        'i': '0',
      }

    ]
  }

  const GridLayout = VueGridLayout.GridLayout
  const GridItem = VueGridLayout.GridItem
  export default {
    data () {
      return {
        // 布局数据
        layoutData: [],
        layoutConfig: {
          height: 100, // 默认高度
          dialogVisible: false // 是否可拖拽或改变大小
        },
        chartOption: {},
      }
    },
    components: {
      GridLayout,
      GridItem,
      Chart

    },
    mounted() {
      this.getChartData();
    },
    methods: {
      init () {
        this.layoutData = layoutData.mainData
      },
      getChartData() {
          this.chartOption = {
            title: {
              text: "ECharts 入门示例"
            },
            tooltip: {},
            xAxis: {
              data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [
              {
                name: "销量",
                type: "bar",
                data: [5, 20, 36, 10, 10, 20]
              }
            ]
          };
      }
    },
    created () {
      this.init()
    }
  }
</script>


<style lang="less" scoped>
  .vue-grid-item {
    border: 1px solid #00a9ed;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-position: center;
  }


</style>
